<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Document</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="container">
    <header>
      <!-- 轮播图 -->
      <div class="swiper-container">
        <div class="swiper-wrapper">

        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </header>
    <section>
      <!-- 开班计划 -->
      <div class="recommend">
        <div class="recommend-plan">
          <img src="./img/pic_blue_kaiban@2x.png" alt="">
        </div>
        <div class="recommend-content">
          <h3 class="recommend-title">开班计划</h3>
          <ul class="play-list">

          </ul>
        </div>
      </div>

      <!-- 企业项目 -->
      <div class="recommend">
        <div class="recommend-plan">
          <img src="./img/pic_red_qiye@2x.png" alt="">
        </div>
        <div class="recommend-content">
          <h3 class="recommend-title project-title">企业项目</h3>
          <ul class="project-list">

          </ul>
        </div>
      </div>

    </section>
    <footer>
      <ul>
        <li>
          <a href="index.html">
            <img src="./img/icon_tab_sy_s@2x.png" alt="">
            <span>首页</span>
          </a>
        </li>
        <li>
          <a href="./curriculum.html">
            <img src="./img/icon_tab_zxkc_n@2x.png" alt="">
            <span>在线课程</span>
          </a>
        </li>
        <li>
          <a href="learning.html">
            <img src="./img/icon_tab_xxlj_n@2x.png" alt="">
            <span>学习路线</span>
          </a>
        </li>
        <li>
          <a href="about.html">
            <img src="./img/icon_tab_gywm_n.png" alt="">
            <span>关于我们</span>
          </a>
        </li>
      </ul>
    </footer>
  </div>
  <script src="./js/flexible.js"></script>
  <script src="./js/swiper-bundle.min.js"></script>
  <script src="./js/zepto.min.js"></script>
  <script src="./js/lazyload.min.js"></script>
  <script>
    $(function () {
      var mySwiper = new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        }
      })

      // 请求banner的数据
      $.ajax({
        url: 'http://39.101.217.150:8075/banner/list',
        type: 'post',
        success: function (data) {
          var datas = data.data;
          $.each(datas, function (index, item) {
            $('.swiper-wrapper').append(
              `
              <div class="swiper-slide">
                <img src="${item.url}" alt="">
              </div>
              `
            )
          })
        }
      })

      // 请求开班计划的数据
      $.ajax({
        url: 'http://39.101.217.150:8075/classplan/list',
        type: 'get',
        data: {
          page: 1,
          size: 3
        },
        success: function (data) {
          // console.log(data);
          var records = data.data.records
          console.log(records);
          $.each(records, function (index, item) {
            $('.play-list').append(`
             <li>
              <div>
                <img src="${item.imgurl}" alt="">
              </div>
              <div class="main">
                <h4>${item.name}</h4>
                <p>${item.mainName}</p>
                <p>开班时间：${item.classTime}</p>
                <p>
                  <span>北京校区</span>
                  <a href="javascript:;">立即抢座</a>
                </p>
              </div>
            </li>
             `)
          })
        }
      })

      // 请求企业项目的数据
      $.ajax({
        url: 'http://39.101.217.150:8075/apps/list',
        type: 'get',
        data: {
          page: 1,
          size: 3
        },
        success: function (data) {
          var records = data.data.records
          $.each(records, function (index, item) {
            $('.project-list').append(`
             <li>
              <div>
                <img data-original="${item.imgurl}" alt="" src="./img/loading.jpg">
              </div>
              <div class="main"> 
                <h4>${item.appName}</h4>
                <p>上架时间：${item.appTime}</p>
                <p>
                  <span>北京校区</span>
                  <a href="${item.appurl}">立即购买</a>
                </p>
              </div>
            </li>
             `)
          })
          $('.project-list img').lazyload({
            // 对哪个容器实现效果
            container: $("section")
          })
        }
      })

    })
  </script>
</body>

</html>